<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<script type="text/javascript" src="${aier_js_url}lib/afu.js"></script>

<div class="top-bg">
	<img id="top-bg" src="" style="width: 100%;height: 100%">
	<div class="cover-setting">
		<s:if test="%{isOther==0}">
			<a class="cover-setting-btn">封面设置</a>

		<!--  封面设置 -->
		<div class="window-el-cov-set" id="coverSetDialog" title="封面设置">
			<div class="navbar">
				<ul class="float-list clearfix">
					<li class="classic-cover-btn current"><a>经典封面</a></li>
					<li class="custom-cover-btn"><a>自定义</a></li>
				</ul>
			</div>
			<div class="box">

				<!-- 经典封面 -->
				<div class="classic-cover-box open">
					<div class="select-area">
						<ul class="float-list clearfix">
							<li id="tha_0"><a href="javascript:void(0);"
								onclick="coLitog('0')"> <img
									src="${get_converimg_url}small/0.jpg" alt=""> <span>回忆</span>
							</a>
							</li>

							<li id="tha_1"><a href="javascript:void(0);"
								onclick="coLitog('1')"> <img
									src="${get_converimg_url}small/1.jpg" alt=""> <span>一个人</span>
							</a>
							</li>

							<li id="tha_2"><a href="javascript:void(0);"
								onclick="coLitog('2')"> <img
									src="${get_converimg_url}small/2.jpg" alt=""> <span>童年</span>
							</a>
							</li>

							<li id="tha_3"><a href="javascript:void(0);"
								onclick="coLitog('3')"> <img
									src="${get_converimg_url}small/3.jpg" alt=""> <span>水果暴动</span>
							</a>
							</li>

						</ul>
					</div>

				</div>
				<!-- 自定义 -->
				<div class="custom-cover-box">
					<div class="picture-preview-area">
						<img class="area-img" alt=""
							src="${aier_img_url}temp/userCovers/1.png" style="display: none;">
						<div id="reselect" onclick="delfile();" class="select-btn"
							style="cursor: pointer;display: none;">重新选择</div>
						<input class="input_opacity" type="file" id="file" name="file">
						<label id="upPic" class="select-btn" style="cursor:pointer;"
							for="file"><a class="select-btn" id="b_selfile"
							href="javascript:;">点击上传图片 </a> </label>
					</div>
				</div>
			</div>
		</div>
		</s:if>
		
		<script type="text/javascript">
			var tagId=0;


			$('#coverSetDialog')
					.dialog(
							{
								//背景变暗
								modal : true,
								autoOpen : false,
								show : "fade",
								hide : "fade",
								width : "650",
								buttons : {
									"确定" : function() {
										if (0==tagId) {
											var fun = function(data) {
												loadCovers();
												$('#coverSetDialog').dialog(
														"close");
											};
											exeAjax(
													ajaxUrl("${aier_url}${aier_urijs}uccomm_updateGivImgName${aier_suffix}"),
													fun, {
														"selCoId" : selCoId
													});
											
										} else if(1==tagId){
											var fun = function(data) {
												loadCovers();
												$('#file').show();
												$('#upPic').show();
												$('.area-img').hide();
												$('#reselect').hide();
												$('#coverSetDialog').dialog(
														"close");
											};
											exeAjax(
													ajaxUrl("${aier_url}${aier_urijs}uccomm_updateUImgName${aier_suffix}"),
													fun, {
														"converimg" : imgName
													});
										}
									},
									"取消" : function() {
										$(this).dialog("close");
									}
								}
							});

			$('.cover-setting-btn').click(function() {
				$('#coverSetDialog').dialog('open');
			});
		</script>
	</div>
</div>

<div class="user-info">
	<!-- 右侧信息 -->
	<div class="user-info-main">
		<div class="user-info-name">
			<span>${user.nickname}</span>
		</div>
		<div class="user-info-signature">
			<span>${user.desinfo}</span>
		</div>
		<div class="user-info-tags">
			<ul class="float-list clearfix">
			    <s:if test='%{user.sex=="男"}'>
			        <li><a class="user-tag icon-1 icon-1-male"></a></li>
			    </s:if>
			    <s:else>
			        <li><a class="user-tag icon-1 icon-1-female"></a></li>
			    </s:else>
			     <!-- <li><span>${user.address}</span> <li> -->
			    <s:if test="%{user.address!=null}">
                    <li><span>|</span><a class="user-tag user-native">${user.address}</a></li>
                </s:if>
                
				
			</ul>
		</div>
		<div class="user-info-setting clearfix">
			<a href="${aier_url}user/useraccountsettings_personalInfo.shtml?uid=${in_uid}"
				class="btn-normal-orange"> <span>编辑个人资料</span> </a>
		</div>
		<div class="user-info-follow clearfix">
			 <a class="btn-follow btn-normal-orange" data-uid="${user.uid }" data-nickname="${user.nickname }"> <span>加关注</span> </a>
        </div>
          	
          	
		<!-- fo -->
		 <div class="dialog-follow-confirm" style="display:none" title="关注成功, 设置备注名吗?">
			<div class="bz-bar">
				<label>
					<span >设置备注名</span>
					<input type="text" id = "remark">
				</label>
			</div>
			
			<div class="gp-bar">
				<div class="exist" id = "groupRadio">
					
				</div>
				<div class="new">
					<a class="btn-addnew">新增一个分组</a>
					<div class="addnew-bar" style="display:none;">
						<label>
							<input type="text">
						</label>
						<a class="btn-orange-2 btn-confirm-add" id = "confirm"><span>确定</span></a>
						<a class="btn-confirm-cancel" id = "cancel">取消</a>
					</div>
				</div>
			</div>
		
		</div>
		<!-- unfo -->
		<div id="dialogUnFollowPeople" title="取消关注?" style="display:none;">
			<p>你确定要取消关注<span class="nickname"></span>吗?
			
		</div>
	</div>

	<!-- 头像 -->
	<div class="user-avatar">
		<div class="avatar">
			<img src="${get_picturl_url}big/${user.headimg}" alt="">
			<s:if test="%{isOther==0}">  
                <div class="manage">
	                <a class="btn-normal-orange" href="${aier_url}${aier_uri}useraccountsettings_flashMAvatar${aier_suffix}?uid=${in_uid}"> <span>换头像</span> </a>
	            </div>
            </s:if>
			
		</div>
		<!-- 粉丝关注微博数 -->
		<div class="user-avatar-bottom">
			<ul class="float-list clearfix">
			    <s:if test="%{isOther==0}">
			        <li><a class="follow-num"
	                    href="${aier_url}${aier_uri}usermyfollow${aier_suffix}"> <strong>${user.cfollow}</strong> <span>关注</span> </a>
	                </li>
	                <li><a class="fan-num"
	                    href="${aier_url}${aier_uri}usermyfans${aier_suffix}"> <strong>${user.cfans}</strong> <span>粉丝</span> </a>
	                </li>
	                <li><a class="xxs-num"
	                    href="${aier_url}${aier_uri}uccomm_userCenter${aier_suffix}"> <strong>${user.cfresh}</strong> <span>内容</span> </a>
	                </li>
			    </s:if>
				<s:else>
				    <li><a class="follow-num"> <strong>${user.cfollow}</strong> <span>关注</span> </a>
	                </li>
	                <li><a class="fan-num"> <strong>${user.cfans}</strong> <span>粉丝</span> </a>
	                </li>
	                <li><a class="xxs-num"> <strong>${user.cfresh}</strong> <span>内容</span> </a>
	                </li>
				</s:else>
			</ul>
		</div>
	</div>
</div>
<script type="text/javascript">

var tagId = 0;
function openTag() {
	if ($(this).hasClass('current')) {
		//do nothing
	} else {
		$(this).addClass('current').nextAll()
				.removeClass('current');
		$(this).prevAll().removeClass('current');
		$('.custom-cover-box,.classic-cover-box').removeClass(
				'open');
	}
	;
	if ($('.classic-cover-btn').hasClass('current')) {
		tagId = 0;
		$('.classic-cover-box').addClass('open');
	} else {
		tagId = 1;
		$('.custom-cover-box').addClass('open');
	}

};

$('.classic-cover-btn,.custom-cover-btn').click(openTag);



	var in_uid = "${in_uid}";
    var isOther = "${isOther}";
	//上传学校封面

	// 上传文件
	function upfile() {
		var pName = $("#file").val().split("\\")[2];
		if (isnull(pName)) {
			$().message("请选择图片！");
			return;
		}
		var pname1 = pName.substring(pName.lastIndexOf('.')).toLowerCase();
		try {
			$.ajaxFileUpload({
						url : "${aier_url}${aier_urijs}uccomm_updateUserConverimg${aier_suffix}?photoName="
								+ pname1,
						secureuri : false,
						fileElementId : 'file',
						dataType : 'json',
						success : function(data, status) {
							$('#file').hide();
							$('#upPic').hide();
							$('.area-img').show();
							$('#reselect').show();
							$('.area-img').attr("src", "${get_converimg_url}origin/" + data.converimg);
							imgName = data.converimg;
						},
						error : function(data, status, e) {
							$().message("服务器连接超时");
						}
					});
		} catch (e) {
			$().message("服务器连接超时");
		};
	}
	var imgName = "";
	//删除图片
	function delfile() {
		var fun = function(data) {
			if (data.s == 1) {
				$('#file').show();
				$('#upPic').show();
				$('.area-img').hide();
				$('#reselect').hide();

				imgName = "";
			} else {
				$().message("删除失败，请稍后再试！");
			}
		};
		exeAjax(
				ajaxUrl("${aier_url}${aier_urijs}uccomm_deleteUserConverimg${aier_suffix}"),
				fun, {
					"photoName" : imgName
				});
	}

	$("#file").live('change', function() {
		upfile();
	});
	
	

	//读取封面
	function loadCovers() {
		var fun = function(data) {
			if (!isnull(data.converimg)) {

				$('#top-bg').attr("src", "${get_converimg_url}origin/" + data.converimg);
			} else {
				$('#top-bg').attr("src", "${get_converimg_url}origin/0.jpg");
			}

		};
		exeAjax(
				ajaxUrl("${aier_url}${aier_urijs}uccomm_serachConverimg${aier_suffix}"),
				fun, {
					"in_uid":in_uid
				});

	}
	var selCoId;
	//选定默认封面
	function coLitog(id){
		for(var i=0;i<4;i++){
			$("#tha_"+i).removeClass("liborder");
		}
		$("#tha_"+id).addClass("liborder");
		selCoId = id;
	}
	
	
	$(document).ready(function() {
	   loadCovers();
	   if (isOther== 0) {
	       $('.user-info-setting').show();
	       $('.user-info-follow').hide();
	       
	   } else {
	       $('.user-info-setting').hide();
	       $('.user-info-follow').show();
	       
	       // 判断是否已关注
	       var fun = function(data) {
	            if (data.s == 1) {
	                // 已关注
	                $('.btn-follow').addClass('has-followed');
	                $('.btn-follow').children('span').text('已关注');
	            } 
	        };
	        exeAjax(
	                ajaxUrl("${aier_url}${aier_urijs}usermyfollow_searchFollowByFuid${aier_suffix}"),
	                fun, {
	                   "in_uid":in_uid
	                });
	       
	   }
	   searchFollowGroup();
	   
	});
	
	// 获取分组列表以及每个分组的人数
    function searchFollowGroup() {
        var fun=function(data){
            if(data.s==1){
                var gr = "";
                if (data.fgList != null && data.fgList.length != 0) {
                    for (var i=0;i<data.fgList.length;i++) {
                         var fg = data.fgList[i];
                         
                         if (fg.fgid != -1) {
                             gr += '<label><input name="group" type="radio" value = "'+fg.fgid+'">'+fg.name+'</input></label>';
                         }
                    }
                }
                
                $("#groupRadio").html(gr);
            }
        };
        exeAjax(
             ajaxUrl("${aier_url}${aier_urijs}usermyfollow_searchFollowGroup${aier_suffix}"),
             fun,{
                 
        });
    }
	
	
	 $('.btn-follow').click(function(){
		 
         var thisBtn = $(this);
         var fuid = thisBtn.attr('data-uid');
         var nickname = thisBtn.attr('data-nickname');
	     if (thisBtn.hasClass('has-followed')) {
	    	 //取消关注
	    	 cancelFollow(fuid,nickname);
	    	
	     } else {
	     
	        var fun=function(data){
	            if(data.s==1){
	                // 关注成功，弹出对话框，修改备注和分组
	                
	                thisBtn.addClass('has-followed');
	                thisBtn.children('span').text('已关注');
	                
	                btnFollow(fuid,nickname);				               
	            } else {
	                 $().message("加关注失败，请重新再试");
	            }
	        };
	        exeAjax(
	             ajaxUrl("${aier_url}${aier_urijs}usermyfollow_addFollow.shtml"),
	             fun,{
	                "fuid":fuid
	        });
	     }
    });
    
    // 取消关注
    function cancelFollow(fuid,nickname) {
        $("#dialogUnFollowPeople").find('.nickname').text(nickname);
        $("#dialogUnFollowPeople").dialog({
            modal: true,
            autoOpen : false,
            show : "fade",
            hide : "fade",
            width : "320",
            height : "240",
            buttons: {
                "确定": function() {
                    
                    var fun=function(data){
                        if (data.s == 1) {
                            $().message("取消关注成功！");
                            $('.btn-follow').removeClass('has-followed');
                            $('.btn-follow').children('span').text('加关注');
		                    $("#dialogUnFollowPeople").dialog( "close" );
                        } else {
                            $().message("取消关注失败，请稍后再试！");
                        }
                    };
                    exeAjax(
                         ajaxUrl("${aier_url}${aier_urijs}usermyfollow_cancelFollow.shtml"),
                         fun,{
                             "fuidStr":fuid
                    });
                    
                    
                },"取消": function() {
                    $("#dialogUnFollowPeople").dialog( "close" );
                }
            }
        });
        $("#dialogUnFollowPeople").dialog( "open" );
        
    }
	    
	// 加关注
	function btnFollow(fuid,nickname){
		var followDialog = $('.dialog-follow-confirm');//关注成功弹出框

		followDialog.dialog({
			modal: true,
			autoOpen : false,
			show : "fade",
		    hide : "fade",
			width : "400",
			height : "360",
			buttons: {
				"确定": function() {
				    var fgid;
		            var group = document.getElementsByName("group");
		            for(var i=0;i<group.length;i++)
		            {
		                if(group[i].checked)
		                   fgid = group[i].value;
		            }
		            var remark = $("#remark").val();
		            if (remark.length > 10) {
		               $().message("备注名太长！");
		               return;
		            }
		            if (!isnull(fgid)) {
		               var fun=function(data){
		               };
		               exeAjax(
		                    ajaxUrl("${aier_url}${aier_urijs}usermyfollow_moveFollowGroup.shtml"),
		                    fun,{
		                        "fuidStr":fuid,
		                        "fgid":fgid
		               });
		            }
		            if (!isnull(remark)) {
		               var fun=function(data){
	                   };
	                   exeAjax(
	                        ajaxUrl("${aier_url}${aier_urijs}userchumscircle_updateRemark.shtml"),
	                        fun,{
	                            "auid":fuid,
	                            "remark":remark
	                   });
		            }
				    $().message("设置成功！");
					followDialog.dialog( "close" );
				},"取消": function() {
					followDialog.dialog( "close" );
				}
			}
		});
		followDialog.dialog( "open" );	
	}
	
	// 创建分组
	$('.dialog-follow-confirm .btn-addnew').click(function(){
	    $(this).hide();
	    inputNewG = $(this).next('.addnew-bar').show();
	    
	});
	
	$("#confirm").click(function(){
	    var newGName = $('.addnew-bar').find('input').val();
	    if(newGName) {
	        var fun=function(data){
	            if (data.s == 1) {
	                searchFollowGroup();
	                $('.btn-addnew').show();
	                $('.addnew-bar').hide();
	                $('.addnew-bar').find('input').val("");
	            } else if (data.s = 10001) {
	                $().message("已存在相同名称分组!");
	            } else {
	                $().message("创建分组失败，请稍后再试!");
	            }
	        };
	        exeAjax(
	             ajaxUrl("${aier_url}${aier_urijs}usermyfollow_addFollowGroup${aier_suffix}"),
	             fun,{
	                 "name":newGName
	        });
	        
	    } else{
	        $().message('请输入分组名');
	    }
	
	});
	
	$("#cancel").click(function(){
	    $('.btn-addnew').show();
	    $('.addnew-bar').hide();
	    $('.addnew-bar').find('input').val("");
	});
	
	

	
</script>